<template>
	<div class="setpaper">
		<swiper :options="swiperOption">
			<!-- slides -->
			<swiper-slide v-for="item of imgList">
				<img :src="item.imgUrl" :key="item.id" class="swiper-img" />
			</swiper-slide>
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>
	</div>
</template>

<script>
	export default {
		name: 'HomeSwiper',
		data() {
			return {
				swiperOption: {
					pagination : {
						el:'.swiper-pagination',
					},
					loop:true
				},
				imgList: [{
						id : 1001,
						imgUrl : "../../../../static/on1.jpg"
					},
					{
						id : 1002,
						imgUrl : "../../../../static/on2.jpg"
					},
					{
						id : 1003,
						imgUrl : "../../../../static/on3.jpg"
					},
					{
						id : 1004,
						imgUrl : "../../../../static/on4.jpg"
					}
				]
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.setpaper >>> .swiper-pagination-bullet-active
		background:#fff
	.setpaper
		width: 100%;
		height:0;
		overflow: hidden;
		padding-bottom: 31.25%;
	.swiper-img 
		width: 100%;
</style>